import { addOptionGroup, updateOptionGroup } from "@/apis/commonService";
import type { OptionGroupFormProps, OptionGroupType } from "@/types";
import { Form, Input, message, Modal, Radio } from "antd";
import TextArea from "antd/es/input/TextArea";
import { forwardRef, useImperativeHandle, useState } from "react";

const OptionGroupForm = forwardRef((props: OptionGroupFormProps, ref) => {
    // 是否修改标识
    const [isEdit,setIsEdit] = useState<boolean>(false);
    // 是否打开标识
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 弹框确认按钮等待标识
    const [confirmLoading, setConfirmLoading] = useState(false);
    // 表单标识
    const [form] = Form.useForm();

    const open = (row?: OptionGroupType) => {
        console.log("row=====>",row);
        setIsModalOpen(true);
        if (row) {
            // 修改
            setIsEdit(true);
            form.setFieldsValue(row);
        }else {
            // 新增
            setIsEdit(false);
        }
    }

    /** 确认按钮回调  */
    const handleOk = async () => {
        // 校验表单必填项
        await form.validateFields();
        let isSuccess = false;
        setConfirmLoading(true);
        const params: OptionGroupType = form.getFieldsValue() as OptionGroupType;
        try {
            if (isEdit) {
                const res = await updateOptionGroup(params);
                if (res.code === 200) {
                    message.success('修改成功！');
                    isSuccess = true;
                }else {
                    message.error(res.msg);
                }
            }else{
                const res = await addOptionGroup(params);
                if (res.code === 200) {
                    message.success('新增成功！');
                    isSuccess = true;
                }else {
                    message.error(res.msg);
                }
            }
        } catch (error) {
            message.error(error + '');
        }finally{
            setConfirmLoading(false);
            if (isSuccess) {
                setIsModalOpen(false);
                props.reQuery();   
            }
        }
    };

    /** 取消按钮回调  */
    const handleCancel = () => {
        console.log('Clicked cancel button');
        setIsModalOpen(false);
    };

    /** 关闭弹窗回调 */
    const closeHandle = () => {
        form.resetFields();
    }


    useImperativeHandle(ref, () => ({
        open: open
    }));

    return (
        <>
            <Modal
                afterClose={closeHandle}
                title={isEdit ? '修改组别类型' : '新增组别类型'}
                open={isModalOpen}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <Form
                    form={form}
                    name="basic"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600,marginTop: '20px' }}
                    initialValues={{ }}
                    autoComplete="off"
                >
                    <Form.Item<OptionGroupType>
                    label="组别id"
                    name="id"
                    style={{display: 'none'}}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item<OptionGroupType>
                    label="组别名称"
                    name="groupDesc"
                    rules={[{ required: true, message: '请输入组别名称！' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item<OptionGroupType>
                    label="组别标识"
                    name="groupKey"
                    rules={[{ required: true, message: '请输入组别标识!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item<OptionGroupType>
                    label="状态"
                    name="status"
                    >
                        <Radio.Group
                            defaultValue={1}
                            options={[
                                { value: 1, label: '正常' },
                                { value: 0, label: '停用' },
                            ]}
                        />
                    </Form.Item>

                    <Form.Item<OptionGroupType>
                    label="备注"
                    name="remark"
                    >
                        <TextArea rows={4} maxLength={200} />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
})

export default OptionGroupForm;